<script setup lang="ts">
import { onMounted } from 'vue'
import { usePagination } from '@/utils/hooks'
import { handleApi } from '@/utils/alert'
import { TableColumnType } from 'ant-design-vue'
import type { TableProps } from 'ant-design-vue'
import QueryForm from './<%= name; %>-form.vue'

// 生成模拟数据, 使用真实接口替换 fetch 方法
const fetch = () => {
  return new Promise<any>(resolve => {
    setTimeout(() => {
      resolve({
        code: 1,
        data: {
          current_page: 1,
          per_page: 1,
          total: 10,
          data: [
            { value: Math.random() }
          ]
        }
      })
    }, 1000)
  })
}

const { dataSource, pagination, fetch, params, loading } = usePagination(fetch, handleApi)

const columns: (TableColumnType & DataIndex<any>)[] = [
  // TODO: 完善字段信息
  { key: 'value', dataIndex: 'value', title: 'value' },
  { key: 'opt', title: '操作' }
]

const onTableChange: TableProps['onChange'] = (pg) => {
  params.value.page = pg.current
  params.value.pagesize = pg.pageSize
  fetch()
}

onMounted(() => {
  fetch()
})

const onFormSubmit = (p: any) => {
  params.value = {
    ...p,
    page: params.value.page,
    pagesize: params.value.pagesize
  }
  fetch()
}

const onFormButton = (key: string) => {
  console.log('button clicked:', key)
}

</script>


<template>
  <div class="px-4 py-8">
    <QueryForm @submit="onFormSubmit" @button="onFormButton"></QueryForm>
  </div>
  
  <ATable
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    :pagination="pagination"
    @change="onTableChange"
  >
    <template #bodyCell="{ column, }">
      <template v-if="column.key === 'opt'">
        <div class="flex flex-col">
          <AButton type="link">btn1</AButton>
          <APopconfirm
            title="Are you sure?"
            ok-text="确定"
            cancel-text="取消"
          >
            <AButton type="link" danger>btn2</AButton>
          </APopconfirm>
        </div>
      </template>
    </template>
  </ATable>
</template>